<template>
  <div class="menu-body">
    <el-row>
      <el-col :span="4"><div class="grid-content bg-purple">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
          <el-radio-button :label="false">展开</el-radio-button>
          <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group>
        <el-menu router v-for="(o,index) in menuData" :key="o.id" default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<!--          <el-menu-item :index="o.url">
            <i class="el-icon-menu"></i>
            <span slot="title">{{o.name}}</span>
          </el-menu-item>-->
          <el-submenu :index="o.url">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span style="color: #f2b9ff">{{o.name}}</span>
            </template>
            <div v-if="o.children">
              <el-menu-item-group v-for="(subm,index) in o.children">
                <el-menu-item router :index="subm.url">{{subm.name}}</el-menu-item>
              </el-menu-item-group>

            </div>
          </el-submenu>
        </el-menu>
      </div></el-col>
      <el-col :span="20"><div class="grid-content bg-purple-light">
        <router-view/>
      </div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "MenuView",
  data(){
    return{
      isCollapse: false,
      menuData:[]
    }
  },methods:{
    menuList(){
      let userId=localStorage.getItem("userId");
      //alert(userId)
      this.axios.post("http://172.20.10.5:8003/api/tb-menu/menuList?userId="+userId).then(res=>{
        console.log("ss==="+JSON.stringify(res.data))
        this.menuData=res.data;
      })
    }
  },created() {
    this.menuList();
  }
}
</script>

<style scoped>
.el-menu{
  background-color: rgba(0, 0, 0, 0); /* 黑色透明背景 */
}
.el-menu-item-group{
  background-color: #f8d6ec;
}
.el-col{
  background-color: rgba(0, 0, 0, 0); /* 黑色透明背景 */
}
.appp{
  background-color: rgba(0, 0, 0, 0); /* 黑色透明背景 */
}
</style>